<template>
  <ContentWrap v-show="setView === 'list'">
    <HeaderTitle title="区域设置" content="自定义区域及其范围。"/>
    <el-button type="primary" @click="handleCreate('create')" class="mb-10px">
      新增
    </el-button>
    <!-- 列表 -->
    <el-table v-loading="loading" :data="list" header-cell-class-name="custom-header" stripe>
      <el-table-column align="center" type="index" label="序号" width="55" :index="indexMethod" />
      <el-table-column align="center" label="区域名称" prop="name" />
      <el-table-column align="center" label="操作" width="180">
        <template #default="scope">
          <el-button link type="primary" @click="handleCreate('detail',scope.row.id)">
            查看
          </el-button>
          <el-button link type="primary" @click="handleCreate('update', scope.row.id)">
            修改
          </el-button>
          <el-button link type="danger" @click="handleDelete(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </ContentWrap>
    <!-- 表单弹窗：添加/修改 -->
  <Create ref="populationDensityFormRef" @success="refresh" @setClose="setClose"  v-show="setView === 'addPopulationDensity'" />
</template>

<script lang="ts" setup>
import Create from './create/index.vue'
import { ref, reactive } from 'vue'
import * as populationDensityApi from '@/api/responseLevel/populationDensity'
defineOptions({ name: 'PopulationDensity' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await populationDensityApi.getpopulationDensityPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const indexMethod = (index: number) => {
  const numberIndex = (queryParams.pageNo-1)*queryParams.pageSize +index + 1
  return numberIndex
}

const setView = ref('list')
const setViewFun=(type:string)=>{
  setView.value=type;
}
const setClose = ()=>{
  setView.value = 'list'
}
// 新增、修改成功更新数据
const populationDensityFormRef = ref()
const refresh = ()=>{
  setClose()
  getList()
}
/** 添加/修改操作 */
const handleCreate = (type: string, id?: number) => {
  setViewFun('addPopulationDensity')
  populationDensityFormRef.value.open(type,id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await populationDensityApi.deletePopulationDensity(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style scoped>
/* 使用::v-deep调整每一行的样式 */
::deep(.el-table) {
  .el-table__row {
    font-size: 16px;
    height: 40px;
    /* 设置每一行的高度 */
    line-height: 40px;
    /* 设置行内文本的垂直对齐 */
    color: #333333;
  }
}
:deep(.custom-header) {
  background-color: #F2F3F5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}
</style>